<template>
    <!-- 有子菜单 -->
    <el-sub-menu :index="menu.path" v-if="menu.children">
        <template #title>
            <el-icon>
                <component :is="menu.icon"></component>
            </el-icon>
            <span>{{ menu.title }}</span>
        </template>
        <!-- 遍历子菜单 -->
        <MyMenu v-for="item in menu.children" :key="item.id" :menu="item"></MyMenu>
    </el-sub-menu>
    <!-- 无子菜单 -->
    <el-menu-item :index="menu.path" v-else>
        <el-icon>
            <component :is="menu.icon"></component>
        </el-icon>
        <span>{{ menu.title }}</span>
    </el-menu-item>
</template>

<script setup lang="ts">
const props = defineProps(['menu'])
// 导入菜单类型
// import type { MenuData } from '@/types';
// 接收Layout.vue组件传递过来的数据（菜单项）
// const props = defineProps<{ menu: MenuData }>()
</script>

<style scoped></style>